<template>
  <div class="flex">
    <div class="flex-main">
      <div :class="{ 'layout-left': true, z6: ['L'].includes(mobileView) }">
        <AreaApp></AreaApp>
      </div>
      <!--layout-left-->
      <div :class="{ 'layout-middle': true, z6: ['M'].includes(mobileView) }">
        <AreaCondition class="layout-middle-t"></AreaCondition>
        <AreaCustomers class="layout-middle-b"></AreaCustomers>
      </div>
      <!--layout-middle-->
      <div :class="{ 'layout-right': true, z6: ['R'].includes(mobileView) }">
        <div class="placeholder-dev">
          <!-- <AreaDialogue></AreaDialogue> -->
        </div>
      </div>
      <!--layout-right-->
    </div>
    <CusInfoAtRightDrawer></CusInfoAtRightDrawer>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "CustomerChat",
  components: {
    AreaApp: () => {
      return import("./L_AreaApp/index.vue");
    },
    AreaCondition: () => {
      return import("./MT_AreaCondition/index.vue");
    },
    AreaCustomers: () => {
      return import("./MB_AreaCustomers/index.vue");
    },
    AreaDialogue: () => {
      return import("./R_AreaDialogue/index.vue");
    },
    CusInfoAtRightDrawer: () => {
      return import("./Drawer/CusInfo.vue");
    },
  },
  computed: {
    ...mapState([""]),
  },
  data() {
    return {
      mobileView: "L",
      isDev: process.env.NODE_ENV == "development",
      isFirstInit: true,
      arrMobileView: [
        { arg: "L", txt: "应用" },
        { arg: "M", txt: "客户" },
        { arg: "R", txt: "对话" },
      ],
    };
  },
  watch: {},
  methods: {
    test: function (str) {
      console.log(str, this[str]);
    },
  },
  beforeCreate: function () {},
  created: function () {},
  beforeMount: function () {},
  mounted: function () {},
  beforeUpdate: function () {},
  updated: function () {},
  beforeDestroy: function () {},
  destroyed: function () {},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import url("./index.less");
</style>